<template>
  <div>
    <Header />
    <!-- 内容区 -->
    <div class="center">
      <template v-if="list.length > 0">
        <div
          class="item"
          v-for="(item, index) in list"
          :key="index"
          @click="handleClick(item)"
        >
          <div class="left">
            <div class="avatar">
              <img src="@/assets/img/message.png" alt="" />
            </div>
            <div class="title">
              <h3>{{ item.title }}</h3>
              <div class="content">
                <div v-html="item.content"></div>
              </div>
            </div>
          </div>
          <div class="right">
            <div class="isRead" :class="item.is_read ? 'active' : ''">
              {{ item.is_read ? "已读" : "未读" }}
            </div>
            <div class="time">{{ item.dateandtime }}</div>
          </div>
        </div>
      </template>
      <!-- 无数据时显示空状态 -->
      <div v-else class="empty-state">
        <div class="empty-icon">
          <img src="@/assets/img/empty-message.png" alt="空消息" />
        </div>
        <div class="empty-desc">您当前没有收到任何消息</div>
        <el-button type="primary" class="empty-btn" @click="getMessage"
          >刷新试试</el-button
        >
      </div>
    </div>
    <Footer :type="2" />
  </div>
</template>
 
<script setup>
import { onUnmounted } from "vue";
import { onMounted, reactive, ref } from "vue";
import { getNewList, getCollectList } from "@/api/index";
import Header from "@/components/Header.vue";
import Footer from "@/components/footer.vue";
import { useRouter } from "vue-router";
const router = useRouter();
const list = ref([]);
//页码
var page = ref(0);

onMounted(() => {
  //为window添加滚动监听事件        注意这样要引用函数而不是使用handleScroll()直接调用
  window.addEventListener("scroll", handleScroll, true);
  getMessage();
});
onUnmounted(() => {
  //页面销毁时消除监听事件增加性能
  window.removeEventListener("scroll", handleScroll, true);
});
const handleScroll = () => {
  //距离顶部的高度
  var scrollTop = document.documentElement.scrollTop;
  //完整高度
  var scrollHeight = document.documentElement.scrollHeight;
  //可视高度
  var clientHeight = document.documentElement.clientHeight;
  //设置一个参数为可视高度＋距离顶部高度
  var Height = scrollTop + clientHeight;
  //判断是否触底：当可视高度＋距离顶部高度 = 完整高度时即为触底
  //这里做了一点小优化使得马上触底时就执行加载
  if (Height >= scrollHeight - 10) {
    console.log("触底了");
    //触底后调用触发加载数据
    getMoreData();
  }
};

//节流判断 判断是否正在加载数据
var isLoading = false;
//定义定时器，先为其赋值null
var Timer = null;
const getMoreData = () => {
  //如果正在加载数据直接退出
  if (isLoading) return;
  //如果定时器存在就清除，防止定时器错乱
  if (Timer) {
    clearTimeout(Timer);
  }
  //将加载数据状态改为true，无法再次使用此函数
  isLoading = true;
  Timer = setTimeout(() => {
    //简单处理数据
    page.value++;
    let params = {
      page: page.value,
      page_size: 10,
    };
    getNewList(params)
      .then((res) => {
        if (res.code == 200) {
          let data = res.data;
          data.forEach((e) => {
            e.content = showHtml(e.content);
          });
          list.value.push(...data);
        } else {
        }
      })
      .catch((err) => {});
    //将状态改为false
    isLoading = false;
  }, 500);
};
const showHtml = (str) => {
  return (
    str
      // .replace(str ? /&(?!#?\w+;)/g : /&/g, "&amp;")
      .replace(/&amp;/g, "&")
      .replace(/&lt;/g, "<")
      .replace(/&gt;/g, ">")
      .replace(/&quot;/g, '"')
      .replace(/&#39;/g, "'")
      .replace(/&ldquo;/g, "“")
      .replace(/&rdquo;/g, "”")
  );
};
//获取我的消息列表
const getMessage = (data) => {
  let params = {
    page: page.value,
    page_size: 10,
  };
  getNewList(params)
    .then((res) => {
      if (res.code == 200) {
        let data = res.data;
        data.forEach((e) => {
          e.content = showHtml(e.content);
        });
        list.value.push(...data);
      } else {
      }
    })
    .catch((err) => {});
};
const handleClick = (item) => {
  let data = encodeURIComponent(JSON.stringify(item));
  router.push({ path: "/message/detail", query: { item: data } });
};
</script>
 
<style lang="scss" scoped>
.center {
  padding: 0 20px;
  margin-bottom: 50px;
  margin-top: 20px;
  .item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 10px;
    .left {
      display: flex;
      flex-direction: row;
      align-items: center;
      .avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-right: 10px;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .title {
        h3 {
          font-size: 14px;
          font-weight: bold;
          white-space: nowrap; /* 禁止换行 */
          overflow: hidden; /* 超出部分隐藏 */
          text-overflow: ellipsis; /* 超出部分显示省略号 */
        }
        span {
          font-size: 14px;
          color: #999999;
        }
      }
    }
    .right {
      .isRead {
        font-size: 14px;
        color: #999999;
        text-align: right;
      }
      .active {
        color: red;
      }
      .time {
        color: #999999;
        font-size: 14px;
      }
    }
  }
}
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  text-align: center;

  .empty-icon {
    width: 120px;
    height: 120px;
    margin-bottom: 20px;

    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }

  .empty-desc {
    font-size: 14px;
    color: #999;
    margin-bottom: 20px;
  }

  .empty-btn {
    width: 120px;
  }
}
h3 {
  width: 200px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1; /* 限制显示的行数 */
  overflow: hidden;
  text-overflow: ellipsis;
}
.content {
  width: 200px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 限制显示的行数 */
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>